<template>
  <el-dialog
      :model-value="isVisible"
      @update:model-value="updateVisibility"
      title="新建用户"
      width="500"
  >
    <el-form :model="userForm" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名">
        <el-input v-model="userForm.name"/>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="userForm.realname"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="userForm.password"/>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="userForm.cellphone"/>
      </el-form-item>
      <el-form-item label="部门">
        <el-select v-model="userForm.departmentId" placeholder="请选择你所在的部门">
          <el-option v-for="item in departmentList" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="角色">
        <el-select v-model="userForm.roleId" placeholder="请选择你的角色">
          <el-option v-for="item in roleList" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="emit('update:isVisible', false)">取消</el-button>
        <el-button type="primary" @click="addUserClick">
          新增
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {ElMessage} from "element-plus";
import {addUserAPI} from '@/services/modules/main/system/system';
import useSystemStore from "@/stores/modules/main/system/system";
import {storeToRefs} from "pinia";
import type {IDepartment} from "@/stores/modules/main/system/type";

const userForm = reactive({
  name: '',
  realname: '',
  password: '',
  cellphone: '',
  departmentId: '',
  roleId: '',
})

const {isVisible = false} = defineProps(['isVisible'])
const emit = defineEmits(['update:isVisible'])

const updateVisibility = (value: boolean) => {
  emit('update:isVisible', value)
}
const addUserClick = async () => {
  const result = await addUserAPI(userForm)
  if (result.code === 0) {
    ElMessage.success('新增用户成功')
    emit('update:isVisible', false)
  }
}
const systemStore = useSystemStore()
const {departmentList, roleList} = storeToRefs(systemStore)
</script>

<style scoped>

</style>
